<template>
    <div ref="header" class="nav-back">
        <span class="iconfont icon-fanhui" @click="$emit('back')"></span>
        <span class="nickname">&nbsp;{{title}}</span>
        <div class="rt">
            <span class="iconfont" :class="item.name" v-for="item in rightIconClass" @click="$emit(item.clickEvent)"></span>
            <span class="save" v-for="item in rightText" @click="$emit(item.clickEvent)">{{item.name}}</span>
            <!--向导航栏右侧插入-->
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";

    @Component({})
    //导航栏，主要用于头部
    export default class AndroidNavBar extends Vue {
        //标题文字
        @Prop({default: "", type: String})
        private title !: string;
        //右侧按钮文本
        @Prop({default: () => [], type: Array})
        private rightText !: Array<any>;
        //右侧图标样式，根据自己使用图标字体库填入
        @Prop({default: () => [], type: Array})
        private rightIconClass !: Array<any>;



    }
</script>

<style scoped lang="stylus">
    @import "style/compatible-safe-area.styl"
    .nav-back
        width 100vw;
        position fixed;
        left 0px;
        z-index: 100;
        color $theme-common-color;
        height calc(47px + var(--safe-area-inset-top));
        line-height 47px;
        padding var(--safe-area-inset-top) 10px 0px 10px;
        background rgba(255, 255, 255, 1);
        border-bottom 1px solid $theme-line-color;


</style>
